<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="/js/jquery-3.6.0.min.js"></script>
    <link href="../css/login.css" type="text/css" rel="stylesheet">
    <link href="../css/tb.css" type="text/css" rel="stylesheet">
</head>
<body>
<div th:include="common/inc"></div>
<div id="main" class="main-warp">
    <div class="main-content" style="height: 350px;margin-top: 50px;margin-bottom: 120px;border-left: 2px solid gainsboro">
        <div class="formDiv">
            <h2 class="text-center">修改密码</h2>
            <form id="loginForm">
                <input name="userId" type="hidden" th:value="${user2.userId}">
                <input type="hidden" id="userpass" th:value="${user2.userPass}">
                <div class="dataform">
                    <div class="input-warp gap">
                        <span class="input-icon iconfont icon-baomi"></span>
                        <input class="inputs" type="password" placeholder="输入原始密码" id="pwd" onblur="checkPwd()" maxlength="20">
                        <span id="sp1"></span>
                    </div>
                    <div class="input-warp gap">
                        <span class="input-icon iconfont icon-baomi"></span>
                        <input class="inputs" type="password" placeholder="输入新密码6-9位数字" id="pwd1" onblur="checkPwd1()" maxlength="20">
                        <span id="sp2"></span>
                    </div>
                    <div class="input-warp gap">
                        <span class="input-icon iconfont icon-baomi"></span>
                        <input class="inputs" type="password" name="userPass" placeholder="确认新密码" onblur="checkPwd2()" id="pwd2" maxlength="20">
                        <span id="sp3"></span>
                    </div>
                    <div class="btn-warp gap">
                        <div class="text-center">
                            <input id="btnLogin" class="btn btn-block lgbtn blue" type="button" value="确认修改密码" onclick="changePass()">
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
<script>
    //原始密码校验
    function checkPwd(){
        if($("#pwd").val()=="" || $("#pwd").val()== null){
            $("#sp1").html("<font color='red'>*</font>");
            return false;
        }
        else if($("#pwd").val()!==$("#userpass").val()){
            alert("密码输入错误");
            $("#sp1").html("<font color='red'>*</font>");
            return false;
        }else {
            $("#sp1").html("<font color='green'>√</font>");
            return true;
        }
    }
    // 新密码校验
    function checkPwd1() {
        let reg = /^[0-9]{6,9}$/;
        if ($("#pwd1").val() == "" && $("#pwd1").val() == null ) {
            $("#sp2").html("<font color='red'>*</font>");
            return false;
        } else if (!reg.test($("#pwd1").val())) {
            $("#sp2").html("<font color='red'>*</font>");
            return false;
        } else {
            $("#sp2").html("<font color='green'>√</font>");
            return true;
        }
    }

    // 确认密码校验
    function checkPwd2(){
        if($("#pwd2").val()=="" || $("#pwd2").val()== null){
            $("#sp3").html("<font color='red'>*</font>");
            return false;
        }
        else if($("#pwd1").val()!==$("#pwd2").val()){
            alert("两次输入密码不一致");
            $("#sp3").html("<font color='red'>*</font>");
            return false;
        }else {
            $("#sp3").html("<font color='green'>√</font>");
            return true;
        }
    }
    //修改密码
    function changePass(){
        var f1 = checkPwd();
        var f2 = checkPwd1();
        var f3 = checkPwd2();

        if(f1 && f2 && f3){
            $.ajax({
                url:"/user/changeUserPass",
                type:"post",
                data:$("form").serialize(),
                success:function(){
                    alert("密码修改成功");
                    location.href="/menu/toAccount";
                },error:function(){
                    alert("密码修改失败");
                }
            })
        }

    }
</script>
</html>